<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 标签绑定id -->
<div id="app">
    <!--
    插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式
    moustache（胡子）是双大括号学名，也叫（胡子语法）
    注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断, 如:
    {{if(a>200){a=100}else{a=300}}} 不支持!
    -->
    {{a >= 100 ? 20 : 10}}

    <!-- b定义在非vue内置清单内容中, 不能直接引用 -->
    <!-- b={{b}} -->
</div>
<script src="js/vue.js"></script>
<script>
    //查看Vue是否正常引入成功(Vue全局变量)
    alert(Vue)
    console.log(Vue)
    var vue = new Vue({
        // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
        el: '#app',
        // 数据管理中心，所有的Vue的数据都在data对象中
        data: {
            a: 100
        },
        // 方法，对应的Vue事件方法清单
        methods: {},
        //我们需要注意的是,所有的对象中的清单内容,都是vue规定,内置的,不可以自由发挥
        //这里的 content 并不是vue内置的, 是自定义的对象, 虽然定义不会报错, 但是页面如果引用就会报错
        content: {
            b: 200
        }
    })
</script>
</body>
</html>